<template>
    <div>
        <div class="title">
            <div class="left">
                <img class="imgOne" src="@/assets/images/bigViewIMG/blue.png" alt="">
                <img class="imgTwo" src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
                <span>进出口商品情况</span>
            </div>
            <div class="right">
                <div class="tabBtn" :class="active == 'imp' ? 'actived' : ''" @click="imp">
                    进口
                </div>
                <div class="tabBtn" :class="active == 'exp' ? 'actived' : ''" @click="exp">出口</div>
            
            </div>
        </div>
        <div id="goodsSituationView" ref="goodsSituationView" style="width:100%;height:250px;"></div>
    </div>
</template>

<script>
import { reqFindCustomsCommodity } from '@/api/home/index.js'
import echarts from 'echarts'
import { decrypt } from '@/utils/AES.js'
export default {
    data(){
        return {
            active: 'imp',
            nameList: [],
            numberList: [],
             DW:''
        }
    },
    watch:{
        nameList: {

            deep: true,
            handler(val) {
                this.setOptions(val, this.numberList,this.DW);
            }
        },
        numberList: {
            deep: true,
            handler(val) {
                this.setOptions(this.nameList, val,this.DW);
            }
        },
        $route: {
            handler(val) {
                if (val.path == '/visual/thirdView/basicFileMap') {
                    this.getList(this.active)
                } else {
                    return
                }
            },
            deep: true
        }
    },
    created(){
        this.getList(this.active)
    },
    mounted() {
        this.options = this.value
        this.$nextTick(() => {
            this.initChart();
        });
    },
   
    methods:{
        imp() {
            this.active = 'imp'
            this.getList('imp')

        },
        exp() {
            this.active = 'exp'
            this.getList('exp')
        },
        async getList(type) {
            let query = JSON.parse(decrypt(this.$route.query.key))
            if (type == 'imp') {
                const res = await reqFindCustomsCommodity({ ieFlag: 'I', consignCode: query.tradeCo })
                // console.log(res);
                const nameList = res.data.map(item => {
                    return item.cname
                })
                 const numberList = res.data.map(item => {
                   
                    return +item.numberName.slice(0,-1)
                })
                // console.log(nameList, numberList);
                this.nameList = nameList
                this.numberList = numberList
                   if(res.data[0]) {
                      this.DW=res.data[0].numberName.slice(-1)
                }
                this.chart.hideLoading();
            } else {
                const res = await reqFindCustomsCommodity({ ieFlag: 'E', consignCode: query.tradeCo })
                // console.log(res);
                const nameList = res.data.map(item => {
                    return item.cname
                })
               const numberList = res.data.map(item => {
                    
                    return +item.numberName.slice(0,-1)
                })
                // console.log(nameList, numberList);
                this.nameList = nameList
                this.numberList = numberList
                 if(res.data[0]) {
                      this.DW=res.data[0].numberName.slice(-1)
                }
                this.chart.hideLoading();
            }

        },
        initChart() {
            this.chart = echarts.init(document.getElementById('goodsSituationView'), null, { renderer: 'canvas' })
            this.chart.showLoading({
                text: '',
                color: '#c23531',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0)',
            })
            // this.setOptions(this.nameList, this.numberList);
        },
        setOptions(aList, bList,DW) {
            // console.log(aList, bList);
            // var data1 = bList
            // var titlename = aList || []
            var data1 = bList
            var titlename = aList
            var max = Math.max.apply(null, data1);
            var getMax = [];
            for (let i = 0; i < titlename.length; i++) {
                getMax.push(max);
            }
            // console.log(getMax);
            this.chart.setOption({
                graphic: {
                    type: 'text',     // 类型：文本
                    left: 'center',
                    top: 'middle',
                    silent: true,     // 不响应事件
                    invisible: aList.length > 0 || bList.length > 0,   // 有数据就隐藏
                    style: {
                        fill: '#9d9d9d',
                        fontWeight: 'bold',
                        text: '查无数据',
                        fontFamily: 'Microsoft YaHei',
                        fontSize: 25
                    }
                },
                // backgroundColor: "#fff",
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "none",
                    },
                    formatter: function (params) {
                        return params[0].name + " : " + params[0].value + DW;
                    },


                },
                //图标位置
                grid: {
                    top: '1%',
                    left: "10%",
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    show: false,
                },
                yAxis: [
                    {
                        show: true,
                        data: titlename,
                        inverse: true,
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            color: "#FFF",
                            formatter: (value, index) => {
                                let val = "";
                                if (value.length > 8) {
                                    val = value.substr(0, 8) + '...';

                                } else {
                                    val = value
                                }
                                if (index > 2) {
                                    return [`{lg|${index + 1}}  ` + ' ' + "{title|" + val + "} "].join("\n");
                                } else if (index == 0) {
                                    return [`{top|${index + 1}}  ` + ' ' + "{title|" + val + "} "].join("\n");
                                } else if (index == 1) {
                                    return [`{top2|${index + 1}}  ` + ' ' + "{title|" + val + "} "].join("\n");
                                } else if (index == 2) {
                                    return [`{top3|${index + 1}}  ` + ' ' + "{title|" + val + "} "].join("\n");
                                }

                            },
                            rich: {
                                lg: {
                                    // backgroundColor: "#8d7fec",
                                    color: "#fff",
                                    // borderRadius: ,
                                    padding: 2,
                                    align: "center",
                                    width: 20,
                                    height: 15,

                                },
                                title: {
                                    // backgroundColor: "#8d7fec",
                                    color: "#fff",
                                    width: 90,
                                    align: "left",
                                    // borderRadius: 5,
                                    padding: 5,
                                },
                                top: {
                                    color: "#fff",
                                    backgroundColor: "#ff224c",
                                    fontWeight: 700,
                                    borderRadius: 5,
                                    padding: 2,
                                    align: "center",
                                    width: 20,
                                    height: 15,
                                },
                                top2: {
                                    color: "#fff",
                                    backgroundColor: "#ff7500",
                                    fontWeight: 700,
                                    borderRadius: 5,
                                    padding: 2,
                                    align: "center",
                                    width: 20,
                                    height: 15,
                                },
                                top3: {
                                    color: "#fff",
                                    backgroundColor: "#ffb500",
                                    fontWeight: 700,
                                    borderRadius: 5,
                                    padding: 2,
                                    align: "center",
                                    width: 20,
                                    height: 15,
                                }
                            },
                        },
                    },
                    {
                        type: 'category',
                        inverse: true,
                        // offset: 0,
                        axisTick: 'none',
                        axisLine: 'none',
                        show: true,
                        axisLabel: {
                            textStyle: {
                                color: '#FFF',
                                fontSize: '12'
                            },
                            formatter: function (value, index) {
                                return value + DW
                            }

                        },
                        data: data1,

                    }
                ],
                series: [
                    {
                        name: "条",
                        type: "bar",
                        zlevel: 1,
                        data: data1,
                        barWidth: 10,
                        // barWidth:'50%',

                        itemStyle: {
                            normal: {
                                barBorderRadius: 20,
                                //   color: function (params) {
                                //     var num = myColor.length;
                                //     return myColor[params.dataIndex % num];
                                //   },
                                // 渐变色
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#0089ff'
                                }, {
                                    offset: 1,

                                    color: '#00c9ff'
                                }]),
                            },
                        },
                    },
                    {
                        name: "背景",
                        type: "bar",
                        barGap: "-100%",

                        data: getMax,
                        barWidth: 10,

                        itemStyle: {
                            normal: {
                                color: "rgba(24,31,68,1)",
                                barBorderRadius: 0,
                            },
                        },
                    },
                ],
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.title {
    height: 40px;
    display: flex;

    .left {
        width: 500px;
        display: flex;
        align-items: center;

        .imgOne {
            width: 35px;
            height: 40px;
        }

        .imgTwo {
            width: 22px;
            height: 21px;
            margin-left: 10px;
        }

        span {
            color: #fff;
            font-size: 16px;
            margin-left: 8px;
        }
    }
        .right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.53);
    
            .tabBtn {
                width: 60px;
                height: 25px;
                font-size: 14px;
                border: 1px solid transparent;
                margin-left: 5px;
                line-height: 24px;
                border-radius: 5px;
                cursor: pointer;
                text-align: center;
            }
    
            .actived {
                border: 1px solid #00c1ff;
                color: #00c1ff;
            }
    
        }
}
</style>